Estimación de Progreso con useFormStatus de React: Predicción del Tiempo de Finalización

El hook useFormStatus de React, introducido en React 18, proporciona información valiosa sobre el estado del envío de un formulario. Aunque no ofrece directamente una estimación del progreso, podemos aprovechar sus propiedades y otras técnicas para proporcionar a los usuarios una retroalimentación significativa durante los envíos de formularios que pueden ser prolongados. Este post explora métodos para estimar el progreso y predecir el tiempo de finalización al usar useFormStatus, lo que resulta en una experiencia más atractiva y fácil de usar.

Entendiendo useFormStatus

Antes de sumergirnos en la estimación del progreso, recapitulemos rápidamente el propósito de useFormStatus. Este hook está diseñado para ser utilizado dentro de un elemento <form> que utiliza la prop action. Devuelve un objeto que contiene las siguientes propiedades:

• pending: Un booleano que indica si el formulario se está enviando actualmente.
• data: Los datos que se enviaron con el formulario (si el envío fue exitoso).
• method: El método HTTP utilizado para el envío del formulario (p. ej., 'POST', 'GET').
• action: La función pasada a la prop action del formulario.
• error: Un objeto de error si el envío falló.

Aunque useFormStatus nos dice si el formulario se está enviando, no proporciona ninguna información directa sobre el progreso del envío, especialmente si la función action implica operaciones complejas o largas.

El Desafío de la Estimación de Progreso

El desafío principal radica en que la ejecución de la función action es opaca para React. No sabemos inherentemente qué tan avanzado está el proceso. Esto es especialmente cierto para las operaciones del lado del servidor. Sin embargo, podemos emplear varias estrategias para superar esta limitación.

Estrategias para la Estimación de Progreso

Aquí hay varios enfoques que puedes adoptar, cada uno con sus propias ventajas y desventajas:

1. Eventos Enviados por el Servidor (SSE) o WebSockets

La solución más robusta suele ser enviar actualizaciones de progreso desde el servidor al cliente. Esto se puede lograr usando:

• Eventos Enviados por el Servidor (SSE): Un protocolo unidireccional (servidor a cliente) que permite al servidor enviar actualizaciones al cliente a través de una única conexión HTTP. SSE es ideal cuando el cliente solo necesita *recibir* actualizaciones.
• WebSockets: Un protocolo de comunicación bidireccional que proporciona una conexión persistente entre el cliente y el servidor. Los WebSockets son adecuados para actualizaciones en tiempo real en ambas direcciones.

Ejemplo (SSE):

Lado del servidor (Node.js):

            const express = require('express');
const app = express();

app.get('/progress', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.flushHeaders();

  let progress = 0;
  const interval = setInterval(() => {
    progress += 10;
    if (progress > 100) {
      progress = 100;
      clearInterval(interval);
      res.write(`data: {"progress": ${progress}, "completed": true}\n\n`);
      res.end();
    } else {
      res.write(`data: {"progress": ${progress}, "completed": false}\n\n`);
    }
  }, 500); // Simula una actualización de progreso cada 500ms
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

            

              
                Copy
              
            
          

Lado del cliente (React):

            import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const eventSource = new EventSource('/progress');

    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setProgress(data.progress);

      if (data.completed) {
        eventSource.close();
      }
    };

    eventSource.onerror = (error) => {
      console.error('EventSource failed:', error);
      eventSource.close();
    };

    return () => {
      eventSource.close();
    };
  }, []);

  return (
    <div>
      <p>Progreso: {progress}%</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Explicación:

• El servidor establece las cabeceras apropiadas para SSE.
• El servidor envía actualizaciones de progreso como eventos data:. Cada evento es un objeto JSON que contiene el progress y una bandera completed.
• El componente de React utiliza EventSource para escuchar estos eventos.
• El componente actualiza el estado (progress) según los eventos recibidos.

Ventajas: Actualizaciones de progreso precisas, retroalimentación en tiempo real.

Desventajas: Requiere cambios en el lado del servidor, implementación más compleja.

2. Sondeo (Polling) con un Endpoint de API

Si no puedes usar SSE o WebSockets, puedes implementar el sondeo (polling). El cliente envía solicitudes periódicamente al servidor para verificar el estado de la operación.

Ejemplo:

Lado del servidor (Node.js):

            const express = require('express');
const app = express();

// Simula una tarea de larga duración
let taskProgress = 0;
let taskId = null;

app.post('/start-task', (req, res) => {
  taskProgress = 0;
  taskId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); // Genera un ID de tarea único

  // Simula el procesamiento en segundo plano
  const interval = setInterval(() => {
    taskProgress += 10;
    if (taskProgress >= 100) {
      taskProgress = 100;
      clearInterval(interval);
    }
  }, 500);

  res.json({ taskId });
});

app.get('/task-status/:taskId', (req, res) => {
  if (req.params.taskId === taskId) {
    res.json({ progress: taskProgress });
  } else {
    res.status(404).json({ message: 'Task not found' });
  }
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

            

              
                Copy
              
            
          

Lado del cliente (React):

            import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [progress, setProgress] = useState(0);
  const [taskId, setTaskId] = useState(null);

  const startTask = async () => {
    const response = await fetch('/start-task', { method: 'POST' });
    const data = await response.json();
    setTaskId(data.taskId);
  };

  useEffect(() => {
    if (!taskId) return;

    const interval = setInterval(async () => {
      const response = await fetch(`/task-status/${taskId}`);
      const data = await response.json();
      setProgress(data.progress);

      if (data.progress === 100) {
        clearInterval(interval);
      }
    }, 1000); // Sondear cada 1 segundo

    return () => clearInterval(interval);
  }, [taskId]);

  return (
    <div>
      <button onClick={startTask} disabled={taskId !== null}>Iniciar Tarea</button>
      {taskId && <p>Progreso: {progress}%</p>}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Explicación:

• El cliente inicia una tarea llamando a /start-task, recibiendo un taskId.
• Luego, el cliente sondea /task-status/:taskId periódicamente para obtener el progreso.

Ventajas: Relativamente simple de implementar, no requiere conexiones persistentes.

Desventajas: Puede ser menos preciso que SSE/WebSockets, introduce latencia debido al intervalo de sondeo, carga el servidor debido a las solicitudes frecuentes.

3. Actualizaciones Optimistas y Heurísticas

En algunos casos, puedes usar actualizaciones optimistas combinadas con heurísticas para proporcionar una estimación razonable. Por ejemplo, si estás subiendo archivos, puedes rastrear el número de bytes subidos del lado del cliente y estimar el progreso basándote en el tamaño total del archivo.

Ejemplo (Subida de Archivo):

            import React, { useState } from 'react';

function MyComponent() {
  const [progress, setProgress] = useState(0);
  const [file, setFile] = useState(null);

  const handleFileChange = (event) => {
    setFile(event.target.files[0]);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);

    try {
      const xhr = new XMLHttpRequest();
      xhr.upload.addEventListener('progress', (event) => {
        if (event.lengthComputable) {
          const percentage = Math.round((event.loaded * 100) / event.total);
          setProgress(percentage);
        }
      });

      xhr.open('POST', '/upload'); // Reemplaza con tu endpoint de subida
      xhr.send(formData);

      xhr.onload = () => {
        if (xhr.status === 200) {
          console.log('Upload complete!');
        } else {
          console.error('Upload failed:', xhr.status);
        }
      };

      xhr.onerror = () => {
        console.error('Upload failed');
      };

    } catch (error) {
      console.error('Upload error:', error);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="file" onChange={handleFileChange} />
        <button type="submit" disabled={!file}>Subir</button>
      </form>
      <p>Progreso: {progress}%</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Explicación:

• El componente utiliza un objeto XMLHttpRequest para subir el archivo.
• El detector de eventos progress en xhr.upload se usa para rastrear el progreso de la subida.
• Las propiedades loaded y total del evento se utilizan para calcular el porcentaje completado.

Ventajas: Solo del lado del cliente, puede proporcionar retroalimentación inmediata.

Desventajas: La precisión depende de la fiabilidad de la heurística, puede no ser adecuado para todo tipo de operaciones.

4. Descomponer la Acción en Pasos más Pequeños

Si la función action realiza múltiples pasos distintos, puedes actualizar la UI después de cada paso para indicar el progreso. Esto requiere modificar la función action para que proporcione actualizaciones.

Ejemplo:

            import React, { useState } from 'react';

async function myAction(setProgress) {
  setProgress(10);
  await someAsyncOperation1();
  setProgress(40);
  await someAsyncOperation2();
  setProgress(70);
  await someAsyncOperation3();
  setProgress(100);
}

function MyComponent() {
  const [progress, setProgress] = useState(0);

  const handleSubmit = async () => {
    await myAction(setProgress);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <button type="submit">Enviar</button>
      </form>
      <p>Progreso: {progress}%</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Explicación:

• La función myAction acepta una devolución de llamada (callback) setProgress.
• Actualiza el estado del progreso en varios puntos durante su ejecución.

Ventajas: Control directo sobre las actualizaciones de progreso.

Desventajas: Requiere modificar la función action, puede ser más complejo de implementar si los pasos no son fácilmente divisibles.

Predicción del Tiempo de Finalización

Una vez que tienes actualizaciones de progreso, puedes usarlas para predecir el tiempo restante estimado. Un enfoque simple es rastrear el tiempo que se tarda en alcanzar un cierto nivel de progreso y extrapolar para estimar el tiempo total.

Ejemplo (Simplificado):

            import React, { useState, useEffect, useRef } from 'react';

function MyComponent() {
  const [progress, setProgress] = useState(0);
  const [estimatedTimeRemaining, setEstimatedTimeRemaining] = useState(null);
  const startTimeRef = useRef(null);

  useEffect(() => {
    if (progress > 0 && startTimeRef.current === null) {
      startTimeRef.current = Date.now();
    }

    if (progress > 0) {
      const elapsedTime = Date.now() - startTimeRef.current;
      const estimatedTotalTime = (elapsedTime / progress) * 100;
      const remainingTime = estimatedTotalTime - elapsedTime;
      setEstimatedTimeRemaining(Math.max(0, remainingTime)); // Asegura que no sea negativo
    }
  }, [progress]);

  // ... (resto del componente y actualizaciones de progreso como se describe en secciones anteriores)

  return (
    <div>
      <p>Progreso: {progress}%</p>
      {estimatedTimeRemaining !== null && (
        <p>Tiempo Restante Estimado: {Math.round(estimatedTimeRemaining / 1000)} segundos</p>
      )}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Explicación:

• Almacenamos el tiempo de inicio cuando el progreso se actualiza por primera vez.
• Calculamos el tiempo transcurrido y lo usamos para estimar el tiempo total.
• Calculamos el tiempo restante restando el tiempo transcurrido del tiempo total estimado.

Consideraciones Importantes:

• Precisión: Esta es una predicción *muy* simplificada. Las condiciones de la red, la carga del servidor y otros factores pueden afectar significativamente la precisión. Técnicas más sofisticadas, como promediar sobre múltiples intervalos, pueden mejorar la precisión.
• Retroalimentación Visual: Indica claramente que el tiempo es una *estimación*. Mostrar rangos (p. ej., "Tiempo restante estimado: 5-10 segundos") puede ser más realista.
• Casos Límite: Maneja los casos límite donde el progreso es muy lento al principio. Evita dividir por cero o mostrar estimaciones excesivamente grandes.

Combinando useFormStatus con la Estimación de Progreso

Aunque useFormStatus en sí no proporciona información de progreso, puedes usar su propiedad pending para habilitar o deshabilitar el indicador de progreso. Por ejemplo:

            import React, { useState } from 'react';
import { useFormStatus } from 'react-dom';

// ... (Lógica de estimación de progreso de los ejemplos anteriores)

function MyComponent() {
  const [progress, setProgress] = useState(0);
  const { pending } = useFormStatus();

  const handleSubmit = async (formData) => {
    // ... (Tu lógica de envío del formulario, incluyendo actualizaciones al progreso)
  };

  return (
    <form action={handleSubmit}>
      <button type="submit" disabled={pending}>Enviar</button>
      {pending && <p>Progreso: {progress}%</p>}
    </form>
  );
}

            

              
                Copy
              
            
          

En este ejemplo, el indicador de progreso solo se muestra mientras el formulario está pendiente (es decir, mientras useFormStatus.pending es true).

Mejores Prácticas y Consideraciones

• Prioriza la Precisión: Elige una técnica de estimación de progreso que sea apropiada para el tipo de operación que se está realizando. SSE/WebSockets generalmente proporcionan los resultados más precisos, mientras que las heurísticas pueden ser suficientes para tareas más simples.
• Proporciona Retroalimentación Visual Clara: Usa barras de progreso, spinners u otras señales visuales para indicar que una operación está en curso. Etiqueta claramente el indicador de progreso y, si aplica, el tiempo restante estimado.
• Maneja los Errores con Elegancia: Si ocurre un error durante la operación, muestra un mensaje de error informativo al usuario. Evita dejar el indicador de progreso atascado en un cierto porcentaje.
• Optimiza el Rendimiento: Evita realizar operaciones computacionalmente costosas en el hilo de la UI, ya que esto puede afectar negativamente el rendimiento. Usa web workers u otras técnicas para descargar trabajo a hilos en segundo plano.
• Accesibilidad: Asegúrate de que los indicadores de progreso sean accesibles para usuarios con discapacidades. Usa atributos ARIA para proporcionar información semántica sobre el progreso de la operación. Por ejemplo, usa aria-valuenow, aria-valuemin y aria-valuemax en una barra de progreso.
• Localización: Al mostrar el tiempo restante estimado, ten en cuenta los diferentes formatos de hora y las preferencias regionales. Usa una biblioteca como date-fns o moment.js para formatear la hora apropiadamente para la configuración regional del usuario.
• Internacionalización: Los mensajes de error y otros textos deben ser internacionalizados para soportar múltiples idiomas. Usa una biblioteca como i18next para gestionar las traducciones.

Conclusión

Aunque el hook useFormStatus de React no proporciona directamente capacidades de estimación de progreso, puedes combinarlo con otras técnicas para ofrecer a los usuarios una retroalimentación significativa durante los envíos de formularios. Usando SSE/WebSockets, sondeo, actualizaciones optimistas o descomponiendo las acciones en pasos más pequeños, puedes crear una experiencia más atractiva y fácil de usar. Recuerda priorizar la precisión, proporcionar una retroalimentación visual clara, manejar los errores con elegancia y optimizar el rendimiento para asegurar una experiencia positiva para todos los usuarios, sin importar su ubicación o contexto.

Exploración Adicional

• Documentación de useFormStatus de React
• Eventos Enviados por el Servidor (SSE)
• WebSockets
• XMLHttpRequest